<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="./css/global.css" rel="stylesheet" />
		<link href="./css/index.css" rel="stylesheet" />
		<link href="./css/film.component.css" rel="stylesheet" />
		<link href="./css/film_ranking.component.css" rel="stylesheet" />
		<link href="./css/footer.component.css" rel="stylesheet" />
		<script src="js/jquery-3.6.0.js"></script>
		<script src="js/film.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$.ajax({
					url: 'data/film_list.json',
					type: 'get',
					dataType: 'json',
					success(data) {
						//-------------热映---------------------
						const hot = data.slice(0, 8);
						let a = ``;
						hot.forEach(function(val) {
							a += fn(val);
						});

						$('.hot').empty();
						$('.hot').append(a);
						//-------------科幻---------------------
						/*
						  1.遍历数组
						  2.遍历数组中电影对象的分类数组
						*/
						let arr = [];
						//#region
						/* data.forEach(function(val) {
							//val 电影对象
							//categoryList 电影的分类数据（数组）
							let categoryList = val.category_list;
							//遍历分类数据（数组）
							let flag = false;
							categoryList.forEach(function(c) {
								//c 分类对象
								if (c.category_id == 1007) {
									flag = true;
								}

							});
							if (flag) {
								arr.push(val);
							}
						}); */
						//#endregion																											

						arr = data.filter(function(val) {
							//val 电影对象
							//categoryList 电影的分类数据（数组）
							let categoryList = val.category_list;
							let flag = false;
							categoryList.forEach(function(c) {
								//c 分类对象
								if (c.category_id == 1007) {
									flag = true;
								}
							});
							return flag;
						})
						// console.log(arr);
						let science = arr.slice(0, 8);
						let a2 = ``;
						science.forEach(function(val) {
							a2 += fn(val);
						});
						// console.log(a2);
						$('.science').empty();
						$('.science').append(a2);
						//-------------动画---------------------
						let arr2 = data.filter(function(val) {
							let categoryList = val.category_list;
							let flag = false;
							categoryList.forEach(function(c) {
								if (c.category_id == 1003) {
									flag = true;
								}
							});
							return flag;
						});

						let animation = arr2.slice(0, 4);
						let a3 = ``;
						animation.forEach(function(val) {
							a3 += fn(val);
						});
						$('.animation').empty();
						$('.animation').append(a3);

						//-------------今日票房---------------------
						// let top = data.slice(0, 1);
						let today = data.slice(0, 10);
						let div = ``;
						today.forEach(function(val, index) {
							if (index == 0) {
								div += `<div class="my-2 shadow-hover rounded p-3 hand d-flex justify-between align-items-center">
									<div class="film-ranking-image w-50 rounded"><img src="./img/${val.film_cover_image}" class="w-100">
									</div>
									<div class="w-50 pl-3">
										<div class="text-gray mb-2">${val.film_name}</div>
										<div class="text-red text-sm text-bold mt-2">${val.film_box}万</div>
									</div>
								</div>`;
							} else {
								div += `
								<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
									<div class="text-big text-red text-bold mr-2">${index + 2}</div>
									<div class="mr-auto text-gray">${val.film_name}</div>
									<div class="text-sm text-red text-bold">${val.film_box}万 </div>
								</div>`;
							}
						});
						console.log(div);
						$('.today').append(div);
					}
				})
			})
		</script>
	</head>
	<body>
		<div id="app" data-v-app="">
			<div class="container d-flex justify-between"><img src="img/logo.png" class="mr-2 align-self-center"
					style="height: 50px;">
				<div class="mr-auto d-flex"><a href="./index.html"
						class="py-3 px-2 text-bold text-decoration-none mr-2 bg-red text-white">首页</a><a
						href="./电影.html"
						class="py-3 px-2 text-bold text-decoration-none mr-2 bg-white text-muted text-hover-red">电影</a><a
						href="./电影.html"
						class="py-3 px-2 text-bold text-decoration-none mr-2 bg-white text-muted text-hover-red">影院</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">演出</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">榜单</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">热点</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">商城</a>
				</div>
				<div class="align-self-center d-flex mr-3"><input type="text"
						class="py-2 px-3 rounded-left outline-0 border-red-1" placeholder="找影视剧、影人、影院"><button
						class="text-white bg-red bg-hover-light-red py-2 px-3 outline-0 border-0 rounded-right"> 搜 索
					</button></div><a href="./login.html"
					class="align-self-center text-sm text-gray text-decoration-none text-hover-red mr-3"> 你好，请登录 </a><a
					href="./regist.html" class="align-self-center text-sm text-red text-decoration-none"> 免费注册 </a>
			</div>
			<div class="container my-4 d-flex justify-between align-items-start">
				<div class="w-66">
					<div class="d-flex justify-between align-items-center">
						<div class="text-big text-bold text-muted">正在热映（<span class="hotNum">16</span>部）</div><a
							href="./film_list.html" class="text-xs text-muted text-decoration-none">全部 &gt;</a>
					</div>
					<!-- 热映 -->
					<div class="mt-3 d-flex flex-wrap align-items-start hot"></div>
					<div class="d-flex justify-between align-items-center mt-4">
						<div class="text-big text-bold text-muted">科幻大片（<span class="scienceNum">9</span>部）</div><a
							href="./film_list.html" class="text-xs text-muted text-decoration-none">全部 &gt;</a>
					</div>
					<!-- 科幻 -->
					<div class="mt-3 d-flex flex-wrap align-items-start science"></div>
					<div class="d-flex justify-between align-items-center mt-4">
						<div class="text-big text-bold text-muted">奇趣动画（4部）</div><a href="./film_list.html"
							class="text-xs text-muted text-decoration-none">全部 &gt;</a>
					</div>
					<!-- 动画 -->
					<div class="mt-3 d-flex flex-wrap align-items-start animation"></div>
				</div>
				<div class="w-33">
					<div class="mb-4 today">
						<div class="text-big text-muted text-bold">今日票房</div>

						<!---->
					</div>
					<div class="mb-4">
						<div class="text-big text-muted text-bold">本月票房</div>
						<div class="my-2 shadow-hover rounded p-3 hand d-flex justify-between align-items-center">
							<div class="film-ranking-image w-50 rounded"><img src="./img/film05.png" class="w-100">
							</div>
							<div class="w-50 pl-3">
								<div class="text-gray mb-2">你好，李焕英</div>
								<div class="text-red text-sm text-bold mt-2">256万</div>
							</div>
						</div>
						<!---->
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">2</div>
							<div class="mr-auto text-gray">悬崖之上</div>
							<div class="text-sm text-red text-bold">255万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">3</div>
							<div class="mr-auto text-gray">唐人街探案3</div>
							<div class="text-sm text-red text-bold">254万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">4</div>
							<div class="mr-auto text-gray">人潮汹涌</div>
							<div class="text-sm text-red text-bold">253万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">5</div>
							<div class="mr-auto text-gray">指环王：双塔奇兵</div>
							<div class="text-sm text-red text-bold">252万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">6</div>
							<div class="mr-auto text-gray">六人-泰坦尼克上的中国幸存者</div>
							<div class="text-sm text-red text-bold">251万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">7</div>
							<div class="mr-auto text-gray">哥斯拉大战金刚</div>
							<div class="text-sm text-red text-bold">250万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">8</div>
							<div class="mr-auto text-gray">阳光劫匪</div>
							<div class="text-sm text-red text-bold">249万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">9</div>
							<div class="mr-auto text-gray">阿凡达</div>
							<div class="text-sm text-red text-bold">248万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">10</div>
							<div class="mr-auto text-gray">熊出没·狂野大陆</div>
							<div class="text-sm text-red text-bold">247万 </div>
						</div>
					</div>
					<div class="mb-4">
						<div class="text-big text-muted text-bold">总票房 Top10</div>
						<div class="my-2 shadow-hover rounded p-3 hand d-flex justify-between align-items-center">
							<div class="film-ranking-image w-50 rounded"><img src="./img/film01.png" class="w-100">
							</div>
							<div class="w-50 pl-3">
								<div class="text-gray mb-2">指环王：护戒使者</div>
								<div class="text-red text-sm text-bold mt-2">260.9万</div>
							</div>
						</div>
						<!---->
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">2</div>
							<div class="mr-auto text-gray">名侦探柯南：绯色的子弹</div>
							<div class="text-sm text-red text-bold">259万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">3</div>
							<div class="mr-auto text-gray">我的姐姐</div>
							<div class="text-sm text-red text-bold">258万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">4</div>
							<div class="mr-auto text-gray">八月未央</div>
							<div class="text-sm text-red text-bold">257万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">5</div>
							<div class="mr-auto text-gray">你好，李焕英</div>
							<div class="text-sm text-red text-bold">256万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">6</div>
							<div class="mr-auto text-gray">悬崖之上</div>
							<div class="text-sm text-red text-bold">255万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">7</div>
							<div class="mr-auto text-gray">唐人街探案3</div>
							<div class="text-sm text-red text-bold">254万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">8</div>
							<div class="mr-auto text-gray">人潮汹涌</div>
							<div class="text-sm text-red text-bold">253万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">9</div>
							<div class="mr-auto text-gray">指环王：双塔奇兵</div>
							<div class="text-sm text-red text-bold">252万 </div>
						</div>
						<!---->
						<div class="my-1 shadow-hover rounded py-1 px-2 hand d-flex justify-between align-items-center">
							<div class="text-big text-red text-bold mr-2">10</div>
							<div class="mr-auto text-gray">六人-泰坦尼克上的中国幸存者</div>
							<div class="text-sm text-red text-bold">251万 </div>
						</div>
					</div>
				</div>
			</div>
			<div class="footer-background">
				<div class="container footer">
					<div class="footer-left">
						<div class="footer-left-column">
							<div class="footer-primary">学掌门院线</div>
							<div class="footer-secondary">中国影迷使用得更多的院线平台</div>
							<div class="footer-secondary">学掌门平台打造的<span class="orange">"影视神器"</span></div>
							<div class="footer-secondary"><span class="orange">60,000</span> 多个专业分类</div>
							<div class="footer-secondary"><span class="orange">600,000</span> 多个影视资源</div>
							<div class="footer-secondary"><span class="orange">760,000,000</span> 多条影评</div>
							<div class="footer-secondary"><span class="orange">38,000</span> 多个影院</div>
						</div>
						<div class="footer-left-column">
							<div class="footer-primary">关于我们</div>
							<div class="footer-secondary">关于学掌门</div>
							<div class="footer-secondary">隐私政策</div>
							<div class="footer-secondary">院线平台服务协议</div>
							<div class="footer-secondary">网络信息侵权通知指引</div>
							<div class="footer-secondary">学掌门院线服务监督员</div>
							<div class="footer-secondary">网站地图</div>
							<div class="footer-secondary">联系我们</div>
						</div>
						<div class="footer-left-column">
							<div class="footer-primary">Vip服务</div>
							<div class="footer-secondary">院线攻略 免费体验</div>
							<div class="footer-secondary">影院问答 评估指南</div>
							<div class="footer-secondary">专业咨询 海量片源</div>
							<div class="footer-secondary">偏好设置 随机抽奖</div>
							<div class="footer-secondary">自动评论 账单统计</div>
							<div class="footer-secondary">消费分析 APP下载</div>
							<div class="footer-secondary">诱惑活动 发现更多</div>
						</div>
					</div>
					<div class="footer-right">
						<div class="footer-right-column"><img src="./img/index_bottom_wechat.png">
							<div class="footer-right-primary"> 学掌门APP </div>
							<div class="footer-right-primary"> 扫描立即下载 </div>
						</div>
						<div class="footer-right-column"><img src="./img/index_bottom_wechat.png">
							<div class="footer-right-primary"> 学掌门院线 </div>
							<div class="footer-right-primary"> 订阅号 </div>
						</div>
						<div class="footer-right-column"><img src="./img/index_bottom_wechat.png">
							<div class="footer-right-primary"> 学掌门院线 </div>
							<div class="footer-right-primary"> 官方服务号 </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
